<template>
  <!-- 商品列表标题 -->
  商品列表

  <!-- 使用Element Plus的表格组件展示商品数据 -->
  <el-table :data="tableData" stripe style="width: 100%">
    <!-- 商品名字列 -->
    <el-table-column
      prop="proname"
      label="商品名字"
      width="180"
      align="center"
    />

    <!-- 图片列，使用作用域插槽自定义内容 -->
    <el-table-column prop="name" label="图片" width="180" align="center">
      <template #default="scope">
        <!-- 展示商品图片，图片地址从数据的img1属性获取 -->
        <img :src="scope.row.img1" alt="" class="img" />
      </template>
    </el-table-column>

    <!-- 是否公开商品列，这里使用开关组件来展示和修改issale状态 -->
    <el-table-column prop="address" label="是否公开商品" align="center">
      <template #default="scope">
        <!-- 使用Element Plus的开关组件，绑定issale状态，并监听change事件 -->
        <el-switch
          v-model="scope.row.issale"
          @change="isSaleChange(scope.row)"
          :active-value="1"
          :inactive-value="0"
        />
      </template>
    </el-table-column>

    <!-- 操作列，包含编辑和删除按钮 -->
    <el-table-column label="操作" align="center">
      <template #default="scope">
        <!-- 编辑按钮，点击时打开编辑抽屉，并传递当前行数据 -->
        <el-button size="small" @click="handleEdit(scope.$index, scope.row)">
          编辑
        </el-button>
        <!-- 删除按钮，点击时调用删除方法，并传递当前行数据 -->
        <el-button
          size="small"
          type="danger"
          @click="handleDelete(scope.$index, scope.row)"
        >
          删除
        </el-button>
      </template>
    </el-table-column>
  </el-table>

  <!-- 分页组件 -->
  <el-pagination
    background
    layout="prev, pager, next"
    :total="total"
    :page-size="pageSize"
    :current-page="currentPage"
    @current-change="handlePageChange"
  />

  <!-- 编辑抽屉组件 -->
  <el-drawer v-model="table" title="编辑商品信息" direction="rtl" size="50%">
    <!-- 抽屉头部，自定义标题 -->
    <template #header>
      <h1 class="drawer-title">编辑商品信息</h1>
    </template>
    <!-- 抽屉主体内容 -->
    <template #default>
      <div class="drawer-content">
        <!-- 输入框，用于编辑商品名字等信息，这里示例四个输入框 -->
        <el-input
          v-model="editFormData.proname"
          class="input-field"
          placeholder="请输入商品名字"
        />
        <el-input
          v-model="editFormData.originprice"
          class="input-field"
          placeholder="请输入原价"
        />
        <el-input
          v-model="editFormData.desc"
          class="input-field"
          placeholder="请输入描述"
        />
        <el-input
          v-model="editFormData.brand"
          class="input-field"
          placeholder="请输入品牌"
        />
      </div>
      <!-- 图片上传组件 -->
      <el-upload
        list-type="picture-card"
        class="upload-section"
        :on-preview="handlePictureCardPreview"
        :on-remove="handleRemove"
        :on-success="handleUploadSuccess"
      >
        <el-icon><Plus /></el-icon>
      </el-upload>

      <!-- 图片预览对话框 -->
      <el-dialog v-model="dialogVisible">
        <img w-full :src="dialogImageUrl" alt="Preview Image" />
      </el-dialog>
    </template>
    <!-- 抽屉底部，包含取消和确认按钮 -->
    <template #footer>
      <div class="drawer-footer">
        <el-button class="cancel-button" @click="cancelClick">取消</el-button>
        <el-button class="confirm-button" type="primary" @click="confirmClick"
          >确认</el-button
        >
      </div>
    </template>
  </el-drawer>
</template>

<script setup lang="ts">
import { proDelRequest, proListRequest, proUpdateRequest } from "@/api/product";
import { ref } from "vue";

// 定义表格数据的响应式引用
const tableData = ref([]);

// 分页相关数据
const total = ref(0); // 总记录数
const pageSize = ref(10); // 每页显示的记录数
const currentPage = ref(1); // 当前页码
function handlePageChange(newPage) {
  // 更新当前页码
  currentPage.value = newPage;
  // 重新获取列表数据
  getlist();
}
// 获取商品列表数据的方法
async function getlist() {
  // 发起请求获取商品列表数据，传入当前页码和每页显示的记录数
  const r = await proListRequest(currentPage.value, pageSize.value, "", "");
  console.log(r.data);
  // 将获取到的数据赋值给tableData
  tableData.value = r.data.data;
  // 更新总记录数
  total.value = r.data.total;
}
// 调用getlist方法初始化表格数据
getlist();

// 删除商品的方法
const handleDelete = async (index: number, row) => {
  // 发起删除请求
  const r = await proDelRequest(row.proid);
  console.log(r.data);
  // 删除成功后重新获取列表数据
  getlist();
};

// 修改商品issale状态的方法
function isSaleChange(row: any) {
  console.log(row.issale);
  // 发起更新请求，修改issale状态
  proUpdateRequest(row.proid, { issale: row.issale }).then(() => {
    // 更新成功后重新获取列表数据
    getlist();
  });
}

// 定义编辑抽屉的显示状态
const table = ref(false);

// 定义编辑表单数据的响应式引用
const editFormData = ref({});

// 编辑按钮点击事件处理函数
const handleEdit = (index: number, row) => {
  console.log(index, row);
  // 打开编辑抽屉
  table.value = true;
  // 将当前行的数据赋值给编辑表单数据
  editFormData.value = { ...row };
};

// 图片上传成功的处理函数
function handleUploadSuccess(response, file) {
  // 假设上传成功后，服务器返回的图片地址在response.data.url中
  // fileList.value.push({ name: file.name, url: response.data.url });
}

// 图片预览的处理函数
const dialogImageUrl = ref("");
const dialogVisible = ref(false);
function handlePictureCardPreview(file) {
  // 设置预览图片的地址，并打开预览对话框
  dialogImageUrl.value = file.url;
  dialogVisible.value = true;
}

// 图片移除的处理函数
function handleRemove(file, fileList) {
  // 更新fileList，这里fileList参数是移除后的列表
  fileList.value = fileList;
}

// 取消按钮点击事件处理函数
function cancelClick() {
  // 关闭编辑抽屉
  table.value = false;
}

// 确认按钮点击事件处理函数
function confirmClick() {
  // 发起更新请求，更新商品信息
  proUpdateRequest(editFormData.value.proid, {
    ...editFormData.value,
  }).then(() => {
    // 更新成功后重新获取列表数据
    getlist();
    // 关闭编辑抽屉
    table.value = false;
  });
}
</script>

<style lang="scss" scoped>
.img {
  width: 100px;
}

// 抽屉标题样式
.drawer-title {
  font-size: 24px;
  color: #333;
  text-align: center;
  margin-bottom: 20px;
}

// 抽屉内容样式
.drawer-content {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 15px;
}

// 输入框样式
.input-field {
  width: 100%;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  font-size: 16px;
  color: #333;
}

// 图片上传区域样式
.upload-section {
  padding: 20px;
  border-top: 1px solid #eee;
  display: flex;
  justify-content: center;
  gap: 10px;
}

// 抽屉底部样式
.drawer-footer {
  display: flex;
  justify-content: flex-end;
  padding: 20px;
  border-top: 1px solid #eee;
}
</style>
